<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { registerArchive, getArchiveList } from '@/api/archive'
import { getOrganizationList } from '@/api/system'
import { getPositionOptions, getPositionList } from '@/api/system'
import { searchUsers } from '@/api/user'

const formRef = ref()
const formData = ref({})

// 账号信息弹窗
const accountInfoVisible = ref(false)
const accountInfo = ref({
  accountEmail: '',
  accountPassword: '',
  accountCreated: false,
})

// 上级搜索弹窗
const supervisorSearchVisible = ref(false)
const supervisorSearchKeyword = ref('')
const supervisorSearchLoading = ref(false)
const supervisorSearchResults = ref([])
const selectedSupervisor = ref(null)
const originalSupervisor = ref(null) // 保存打开弹窗时的原始选择

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    message.success('已复制到剪贴板')
  } catch {
    // 降级方案：使用传统方法
    const textArea = document.createElement('textarea')
    textArea.value = text
    textArea.style.position = 'fixed'
    textArea.style.opacity = '0'
    document.body.appendChild(textArea)
    textArea.select()
    try {
      document.execCommand('copy')
      message.success('已复制到剪贴板')
    } catch {
      message.error('复制失败，请手动复制')
    }
    document.body.removeChild(textArea)
  }
}

// 生成员工编号（EMP + 8位数字）
const generateEmployeeCode = async () => {
  // 使用时间戳和随机数组合生成8位数字
  const timestamp = Date.now()
  // 取时间戳的后6位（确保是6位数字）
  const timePart = String(timestamp % 1000000).padStart(6, '0')
  // 生成2位随机数（00-99）
  const randomPart = String(Math.floor(Math.random() * 100)).padStart(2, '0')
  // 组合成8位数字
  const codeNumber = timePart + randomPart
  let employeeCode = `EMP${codeNumber}`

  // 检查编号是否已存在（最多检查5次）
  let attempts = 0
  const maxAttempts = 5

  while (attempts < maxAttempts) {
    try {
      const response = await getArchiveList({ keyword: employeeCode, page: 1, pageSize: 1 })
      if (response && response.list && response.list.length > 0) {
        // 如果找到相同的编号，重新生成
        // 使用新的时间戳和更大的随机数范围
        const newTimestamp = Date.now()
        const newTimePart = String(newTimestamp % 10000).padStart(4, '0')
        const newRandomPart = String(Math.floor(Math.random() * 10000)).padStart(4, '0')
        employeeCode = `EMP${newTimePart}${newRandomPart}`
        attempts++
      } else {
        // 编号不存在，可以使用
        break
      }
    } catch (error) {
      // 如果查询失败，直接使用生成的编号（避免因为接口问题导致无法生成）
      console.warn('检查员工编号是否存在时出错，使用生成的编号:', error)
      break
    }
  }

  return employeeCode
}

// 机构选项
const organizationOptions = ref([])
// 职位选项
const positionOptions = ref([])
// 职位 code 到 id 的映射
const positionCodeToIdMap = ref({})

// 获取机构选项
const fetchOrganizationOptions = async () => {
  try {
    // 直接使用机构列表接口，因为它包含了 id 信息
    const listResponse = await getOrganizationList()
    if (listResponse && listResponse.list) {
      // 扁平化机构列表
      const flattenOrganizations = (orgs) => {
        const result = []
        orgs.forEach((org) => {
          result.push({
            id: typeof org.id === 'string' ? parseInt(org.id, 10) : org.id,
            code: org.code,
            name: org.name,
          })
          if (org.children && org.children.length > 0) {
            result.push(...flattenOrganizations(org.children))
          }
        })
        return result
      }

      const flattenedList = flattenOrganizations(listResponse.list)
      // 直接从列表构建选项，并保存 id 信息
      organizationOptions.value = flattenedList.map((org) => ({
        value: org.code,
        label: org.name,
        id: org.id, // 保存 id，这样就不需要映射了
      }))
    } else {
      organizationOptions.value = []
    }
  } catch (error) {
    console.error('获取机构选项失败:', error)
    message.error('获取机构选项失败')
    organizationOptions.value = []
  }
}

// 获取职位选项（根据机构过滤）
const fetchPositionOptions = async (organizationCode) => {
  try {
    // 如果提供了机构 code，直接从选项中找到对应的 id
    let organizationId = undefined
    if (organizationCode) {
      const orgOption = organizationOptions.value.find((opt) => opt.value === organizationCode)
      if (orgOption && orgOption.id) {
        organizationId = orgOption.id
      }
    }

    // 优先使用 list 接口，因为它返回的数据更完整
    const listResponse = await getPositionList(undefined, organizationId)

    if (listResponse && listResponse.list) {
      // 从 list 接口构建职位选项
      positionOptions.value = listResponse.list.map((position) => ({
        value: position.code,
        label: position.name,
      }))

      // 建立 code 到 id 的映射
      listResponse.list.forEach((position) => {
        const posId = typeof position.id === 'string' ? parseInt(position.id, 10) : position.id
        positionCodeToIdMap.value[position.code] = posId
      })
    } else {
      // 如果 list 接口失败，回退到 options 接口
      const optionsResponse = await getPositionOptions(organizationId)
      if (optionsResponse && optionsResponse.list) {
        positionOptions.value = optionsResponse.list.map((item) => ({
          value: item.value,
          label: item.label,
        }))
      } else {
        positionOptions.value = []
      }
    }
  } catch (error) {
    console.error('获取职位选项失败:', error)
    message.error('获取职位选项失败')
    positionOptions.value = []
  }
}

// 处理机构选择变化
const handleOrganizationChange = (value) => {
  // 如果先选了职位，再选机构，清空职位并刷新职位列表
  if (formData.value.position) {
    formData.value.position = undefined
  }
  // 根据选择的机构刷新职位列表
  fetchPositionOptions(value)
}

// 打开上级搜索弹窗
const openSupervisorSearch = async () => {
  supervisorSearchVisible.value = true
  supervisorSearchKeyword.value = ''
  supervisorSearchResults.value = []
  selectedSupervisor.value = null
  // 如果已选择上级，显示当前选择
  if (formData.value.supervisorId && formData.value.supervisorName) {
    const currentSupervisor = {
      id: formData.value.supervisorId,
      name: formData.value.supervisorName,
    }
    selectedSupervisor.value = currentSupervisor
    originalSupervisor.value = { ...currentSupervisor }
  } else {
    originalSupervisor.value = null
  }

  // 如果已选择机构，自动进行搜索
  if (formData.value.organization) {
    await performSupervisorSearch('')
  }
}

// 关闭上级搜索弹窗（取消时恢复原始选择）
const closeSupervisorSearch = (isConfirm = false) => {
  if (!isConfirm && originalSupervisor.value) {
    // 如果点击取消，恢复原始选择
    selectedSupervisor.value = { ...originalSupervisor.value }
    formData.value.supervisorId = originalSupervisor.value.id
    formData.value.supervisorName = originalSupervisor.value.name
  } else if (!isConfirm && !originalSupervisor.value) {
    // 如果原来没有选择，点击取消时清除选择
    formData.value.supervisorId = undefined
    formData.value.supervisorName = undefined
  }
  supervisorSearchVisible.value = false
}

// 执行上级搜索（内部函数）
const performSupervisorSearch = async (keyword = '') => {
  // 如果既没有关键字，也没有机构，不搜索
  if (!keyword.trim() && !formData.value.organization) {
    supervisorSearchResults.value = []
    return
  }

  supervisorSearchLoading.value = true
  try {
    // 构建搜索参数
    const searchParams = {}

    // 添加关键字
    if (keyword.trim()) {
      searchParams.keyword = keyword.trim()
    }

    // 添加机构筛选（从选项中找到机构名称）
    if (formData.value.organization) {
      const orgOption = organizationOptions.value.find(
        (opt) => opt.value === formData.value.organization,
      )
      if (orgOption && orgOption.label) {
        searchParams.organization = orgOption.label
      }
    }

    const response = await searchUsers(searchParams)
    if (response && Array.isArray(response)) {
      supervisorSearchResults.value = response
    } else if (response && response.list) {
      supervisorSearchResults.value = response.list
    } else {
      supervisorSearchResults.value = []
    }
  } catch (error) {
    console.error('搜索上级失败:', error)
    message.error('搜索上级失败')
    supervisorSearchResults.value = []
  } finally {
    supervisorSearchLoading.value = false
  }
}

// 搜索上级（用户手动搜索）
const handleSupervisorSearch = async () => {
  await performSupervisorSearch(supervisorSearchKeyword.value)
}

// 选择上级
const handleSelectSupervisor = (user) => {
  selectedSupervisor.value = user
  formData.value.supervisorId = user.id
  formData.value.supervisorName = user.name
  supervisorSearchVisible.value = false
}

// 清除上级选择
const handleClearSupervisor = () => {
  formData.value.supervisorId = undefined
  formData.value.supervisorName = undefined
  selectedSupervisor.value = null
}

// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  if (!date) return undefined
  if (dayjs.isDayjs(date)) {
    return date.format('YYYY-MM-DD')
  }
  return date
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()

    // 准备提交数据
    const submitData = {
      employeeCode: formData.value.employeeCode,
      name: formData.value.name,
      gender: formData.value.gender,
      idCard: formData.value.idCard,
      birthDate: formatDate(formData.value.birthDate),
      ethnicity: formData.value.ethnicity,
      politicalStatus: formData.value.politicalStatus,
      maritalStatus: formData.value.maritalStatus,
      phone: formData.value.phone,
      email: formData.value.email,
      emergencyContact: formData.value.emergencyContact,
      emergencyPhone: formData.value.emergencyPhone,
      // 将 code 转换为 id（直接从选项中找到）
      organizationId: organizationOptions.value.find(
        (opt) => opt.value === formData.value.organization,
      )?.id,
      positionId: positionCodeToIdMap.value[formData.value.position],
      joinDate: formatDate(formData.value.joinDate),
      probationPeriod: formData.value.probationPeriod,
      contractPeriod: formData.value.contractPeriod,
      supervisorId: formData.value.supervisorId,
      workLocation: formData.value.workLocation,
      bankName: formData.value.bankName,
      bankAccount: formData.value.bankAccount,
    }

    // 移除 undefined 的字段
    Object.keys(submitData).forEach((key) => {
      if (submitData[key] === undefined || submitData[key] === null || submitData[key] === '') {
        delete submitData[key]
      }
    })

    // 调用 API
    const response = await registerArchive(submitData)
    console.log('档案登记响应:', response)

    // 如果返回了账号信息，显示账号密码弹窗
    if (response && response.accountCreated && response.accountEmail && response.accountPassword) {
      accountInfo.value = {
        accountEmail: response.accountEmail,
        accountPassword: response.accountPassword,
        accountCreated: response.accountCreated,
      }
      accountInfoVisible.value = true
    } else {
      message.success('档案登记成功，已提交复核')
    }

    formRef.value.resetFields()
    formData.value = {}
    // 提交成功后重新生成员工编号
    formData.value.employeeCode = await generateEmployeeCode()
  } catch (error) {
    if (error?.errorFields) {
      return
    }
    // 错误信息已由 handleApiError 处理，这里不需要再次显示
  }
}

const handleReset = async () => {
  formRef.value.resetFields()
  formData.value = {}
  // 重置时重新生成员工编号
  formData.value.employeeCode = await generateEmployeeCode()
}

onMounted(async () => {
  fetchOrganizationOptions()
  fetchPositionOptions()
  // 初始化时生成员工编号
  formData.value.employeeCode = await generateEmployeeCode()
})
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">人力资源档案登记</h1>
      <p class="page-desc">新员工档案信息的初次录入，填写完成后将提交复核</p>
    </div>

    <div class="page-content">
      <a-card class="form-card">
        <a-form
          ref="formRef"
          :model="formData"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          layout="horizontal"
        >
          <a-card title="基本信息" class="section-card" :bordered="false">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="员工编号"
                  name="employeeCode"
                  :rules="[{ required: true, message: '员工编号不能为空' }]"
                >
                  <a-input
                    v-model:value="formData.employeeCode"
                    placeholder="系统自动生成"
                    readonly
                    style="background-color: #f5f5f5; cursor: not-allowed"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="姓名"
                  name="name"
                  :rules="[{ required: true, message: '请输入姓名' }]"
                >
                  <a-input v-model:value="formData.name" placeholder="请输入姓名" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="性别"
                  name="gender"
                  :rules="[{ required: true, message: '请选择性别' }]"
                >
                  <a-select v-model:value="formData.gender" placeholder="请选择性别">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="身份证号"
                  name="idCard"
                  :rules="[{ required: true, message: '请输入身份证号' }]"
                >
                  <a-input v-model:value="formData.idCard" placeholder="请输入身份证号" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="出生日期" name="birthDate">
                  <a-date-picker v-model:value="formData.birthDate" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="民族" name="ethnicity">
                  <a-input v-model:value="formData.ethnicity" placeholder="请输入民族" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="政治面貌" name="politicalStatus">
                  <a-select v-model:value="formData.politicalStatus" placeholder="请选择政治面貌">
                    <a-select-option value="群众">群众</a-select-option>
                    <a-select-option value="团员">团员</a-select-option>
                    <a-select-option value="党员">党员</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="婚姻状况" name="maritalStatus">
                  <a-select v-model:value="formData.maritalStatus" placeholder="请选择婚姻状况">
                    <a-select-option value="未婚">未婚</a-select-option>
                    <a-select-option value="已婚">已婚</a-select-option>
                    <a-select-option value="离异">离异</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="手机号码" name="phone">
                  <a-input v-model:value="formData.phone" placeholder="请输入手机号码" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="邮箱" name="email">
                  <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="紧急联系人" name="emergencyContact">
                  <a-input
                    v-model:value="formData.emergencyContact"
                    placeholder="请输入紧急联系人"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <a-card title="工作信息" class="section-card" :bordered="false">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="所属机构"
                  name="organization"
                  :rules="[{ required: true, message: '请选择所属机构' }]"
                >
                  <a-select
                    v-model:value="formData.organization"
                    placeholder="请选择所属机构"
                    @change="handleOrganizationChange"
                  >
                    <a-select-option
                      v-for="option in organizationOptions"
                      :key="option.value"
                      :value="option.value"
                    >
                      {{ option.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="职位"
                  name="position"
                  :rules="[{ required: true, message: '请选择职位' }]"
                >
                  <a-select
                    v-model:value="formData.position"
                    placeholder="请选择职位"
                    :disabled="!formData.organization"
                  >
                    <a-select-option
                      v-for="option in positionOptions"
                      :key="option.value"
                      :value="option.value"
                    >
                      {{ option.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="入职日期"
                  name="joinDate"
                  :rules="[{ required: true, message: '请选择入职日期' }]"
                >
                  <a-date-picker v-model:value="formData.joinDate" style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="试用期" name="probationPeriod">
                  <a-select v-model:value="formData.probationPeriod" placeholder="请选择试用期">
                    <a-select-option value="1个月">1个月</a-select-option>
                    <a-select-option value="3个月">3个月</a-select-option>
                    <a-select-option value="6个月">6个月</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="合同期限" name="contractPeriod">
                  <a-select v-model:value="formData.contractPeriod" placeholder="请选择合同期限">
                    <a-select-option value="1年">1年</a-select-option>
                    <a-select-option value="3年">3年</a-select-option>
                    <a-select-option value="5年">5年</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="直接上级" name="supervisorId">
                  <a-input
                    :value="formData.supervisorName || ''"
                    placeholder="请选择直接上级"
                    readonly
                    style="cursor: pointer; background-color: #fff"
                    @click="openSupervisorSearch"
                  >
                    <template #suffix>
                      <span
                        style="color: #1890ff; cursor: pointer"
                        @click.stop="openSupervisorSearch"
                      >
                        搜索
                      </span>
                      <span
                        v-if="formData.supervisorName"
                        style="color: #ff4d4f; margin-left: 8px; cursor: pointer"
                        @click.stop="handleClearSupervisor"
                      >
                        清除
                      </span>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="工作地点" name="workLocation">
                  <a-input v-model:value="formData.workLocation" placeholder="请输入工作地点" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="工资卡开户行" name="bankName">
                  <a-input v-model:value="formData.bankName" placeholder="请输入开户行" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="银行卡号" name="bankAccount">
                  <a-input v-model:value="formData.bankAccount" placeholder="请输入银行卡号" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <div class="form-actions">
            <a-button @click="handleReset">重置</a-button>
            <a-button type="primary" @click="handleSubmit">提交登记</a-button>
          </div>
        </a-form>
      </a-card>
    </div>

    <!-- 账号信息弹窗 -->
    <a-modal
      v-model:open="accountInfoVisible"
      title="账号信息"
      width="600px"
      :footer="null"
      :mask-closable="false"
    >
      <div class="account-info-container">
        <div class="success-message">
          <span style="color: #52c41a; font-size: 24px; margin-right: 8px">✓</span>
          <span>档案登记成功，已自动创建员工账号</span>
        </div>

        <div class="account-details">
          <div class="account-item">
            <div class="account-label">账号邮箱：</div>
            <div class="account-value">
              <span class="account-text">{{ accountInfo.accountEmail }}</span>
              <a-button type="link" size="small" @click="copyToClipboard(accountInfo.accountEmail)">
                复制
              </a-button>
            </div>
          </div>

          <div class="account-item">
            <div class="account-label">账号密码：</div>
            <div class="account-value">
              <span class="account-text password-text">{{ accountInfo.accountPassword }}</span>
              <a-button
                type="link"
                size="small"
                @click="copyToClipboard(accountInfo.accountPassword)"
              >
                复制
              </a-button>
            </div>
          </div>
        </div>

        <div class="account-tips">
          <a-alert message="重要提示" type="warning" show-icon :closable="false">
            <template #description>
              <p>请妥善保管账号信息，建议将账号密码告知员工，并提醒员工首次登录后修改密码。</p>
            </template>
          </a-alert>
        </div>

        <div class="account-actions">
          <a-button type="primary" @click="accountInfoVisible = false">我知道了</a-button>
        </div>
      </div>
    </a-modal>

    <!-- 上级搜索弹窗 -->
    <a-modal
      v-model:open="supervisorSearchVisible"
      title="选择直接上级"
      width="700px"
      :footer="null"
      :mask-closable="false"
    >
      <div class="supervisor-search-container">
        <a-input-search
          v-model:value="supervisorSearchKeyword"
          placeholder="请输入姓名、邮箱或员工编号进行搜索"
          enter-button="搜索"
          size="large"
          :loading="supervisorSearchLoading"
          @search="handleSupervisorSearch"
        />

        <div v-if="formData.organization" class="search-filter-tip">
          <a-alert type="info" show-icon :closable="false" style="margin-top: 12px">
            <template #message>
              <span>当前筛选条件：</span>
              <span v-if="formData.organization" style="margin-left: 8px">
                机构：{{
                  organizationOptions.find((opt) => opt.value === formData.organization)?.label
                }}
              </span>
            </template>
          </a-alert>
        </div>

        <div v-if="selectedSupervisor" class="selected-supervisor">
          <div class="selected-label">已选择：</div>
          <div class="selected-info">
            <div class="selected-name">{{ selectedSupervisor.name }}</div>
            <div class="selected-details">
              <span v-if="selectedSupervisor.email">{{ selectedSupervisor.email }}</span>
              <span v-if="selectedSupervisor.organization">
                {{ selectedSupervisor.organization }}
              </span>
              <span v-if="selectedSupervisor.position">{{ selectedSupervisor.position }}</span>
            </div>
          </div>
          <a-button type="link" danger @click="handleClearSupervisor">清除</a-button>
        </div>

        <div class="search-results">
          <div v-if="supervisorSearchLoading" class="loading-container">
            <a-spin size="large" />
          </div>
          <div
            v-else-if="supervisorSearchResults.length === 0 && supervisorSearchKeyword"
            class="empty-container"
          >
            <a-empty description="未找到相关用户" />
          </div>
          <div v-else-if="supervisorSearchResults.length > 0" class="results-list">
            <div
              v-for="user in supervisorSearchResults"
              :key="user.id"
              class="result-item"
              :class="{ active: selectedSupervisor?.id === user.id }"
              @click="handleSelectSupervisor(user)"
            >
              <div class="result-main">
                <div class="result-name">{{ user.name }}</div>
                <div class="result-info">
                  <span v-if="user.email" class="info-tag">{{ user.email }}</span>
                  <span v-if="user.organization" class="info-tag">{{ user.organization }}</span>
                  <span v-if="user.position" class="info-tag">{{ user.position }}</span>
                  <span v-if="user.role" class="info-tag">{{ user.role }}</span>
                </div>
              </div>
              <div v-if="selectedSupervisor?.id === user.id" class="result-check">
                <span style="color: #52c41a; font-size: 18px">✓</span>
              </div>
            </div>
          </div>
          <div v-else class="empty-container">
            <a-empty description="请输入关键字搜索上级" />
          </div>
        </div>

        <div class="search-actions">
          <a-button @click="closeSupervisorSearch(false)">取消</a-button>
          <a-button type="primary" @click="closeSupervisorSearch(true)"> 确定 </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<style scoped>
.page-container {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-desc {
  font-size: 14px;
  color: #86868b;
  margin: 0;
}

.page-content {
  margin-top: 24px;
}

.form-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  border: none;
}

.section-card {
  margin-bottom: 24px;
  background: #fafafa;
  border-radius: 8px;
}

.section-card :deep(.ant-card-head) {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 24px;
}

.section-card :deep(.ant-card-head-title) {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
}

.section-card :deep(.ant-card-body) {
  padding: 24px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* 账号信息弹窗样式 */
.account-info-container {
  padding: 8px 0;
}

.success-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin-bottom: 24px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #389e0d;
}

.account-details {
  margin-bottom: 24px;
}

.account-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.account-label {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  min-width: 100px;
  margin-right: 16px;
}

.account-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.account-text {
  font-size: 14px;
  color: #1d1d1f;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  flex: 1;
  margin-right: 12px;
}

.password-text {
  font-weight: 600;
  color: #1890ff;
  letter-spacing: 2px;
}

.account-tips {
  margin-bottom: 24px;
}

.account-actions {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* 上级搜索弹窗样式 */
.supervisor-search-container {
  padding: 8px 0;
}

.selected-supervisor {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-top: 16px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.selected-label {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  margin-right: 12px;
}

.selected-info {
  flex: 1;
}

.selected-name {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}

.selected-details {
  font-size: 12px;
  color: #86868b;
}

.selected-details span {
  margin-right: 12px;
}

.search-results {
  margin-top: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.result-item:hover {
  background: #f0f0f0;
  border-color: #1890ff;
}

.result-item.active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.result-main {
  flex: 1;
}

.result-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.result-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-tag {
  font-size: 12px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  color: #86868b;
}

.result-check {
  margin-left: 12px;
}

.search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
</style>
